﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<%@ Register src="include/TimKiemTheoQuanHuyen.ascx" tagname="TimKiemTheoQuanHuyen" tagprefix="uc1" %>

<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/Style.css" rel="stylesheet" type="text/css" />
    <link href="css/menuright.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCBZ7ctqrozfAmFGSKnT4qUSVk6CI_lRL0&sensor=true">
    </script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/popupInsert.js" type="text/javascript"></script>
    <script src="Scripts/menuright.js" type="text/javascript"></script>
    <style type="text/css">
        .contextmenu{
            visibility:hidden;
            background:#ffffff;
            border:1px solid #8888FF;
            z-index: 10;  
            position: relative;
            width: 140px;
        }
        .contextmenu div{
            padding-left: 5px
       }
</style>
    <script type="text/javascript">
        var map, marker;
        var html = [];
        var arrInfoWindow = [];
        var contextmenuDir;
        var projection;
        var infoWindow = new google.maps.InfoWindow();
        function initialize() {
            if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function (pos) {
                var mapDiv = document.getElementById('content');
                map = new google.maps.Map(mapDiv, {
                    center: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                //google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
                //tinh nang Menu RightClick tren ban do
                google.maps.event.addListener(map, "rightclick", function (event) { showContextMenu(event.latLng); });
                // an menu khi chuot dc dua ra khoi khu vuc map
                $(map.getDiv()).mouseleave(function () {
                    $('.contextmenu').css({
                        "visibility": "hidden"
                    });
                });
                // An menu khi leftClick len map
                google.maps.event.addListener(map, "click", function (event) {
                    $('.contextmenu').css({
                        "visibility": "hidden"
                    });
                });
            }, function (error) {
                var myOptions = {
                    //center: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('content'),
            myOptions);


            });
        }
        // Tao su kien right clich

        function getCanvasXY(caurrentLatLng) {
            var scale = Math.pow(2, map.getZoom());
            var nw = new google.maps.LatLng(
            map.getBounds().getNorthEast().lat(),
            map.getBounds().getSouthWest().lng());
            var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
            var worldCoordinate = map.getProjection().fromLatLngToPoint(caurrentLatLng);
            var caurrentLatLngOffset = new google.maps.Point(
            Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
            Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale));
            return caurrentLatLngOffset;
        }
        function setMenuXY(caurrentLatLng) {
            var mapWidth = $('#content').width();
            var mapHeight = $('#content').height();
            var menuWidth = $('.contextmenu').width();
            var menuHeight = $('.contextmenu').height();
            var clickedPosition = getCanvasXY(caurrentLatLng);
            var x = clickedPosition.x/2;
            var y = clickedPosition.y/2;

            if ((mapWidth - x) > menuWidth)
                x = x - menuWidth;
            if ((mapHeight - y) > menuHeight)
                y = y - menuHeight;

            $('.contextmenu').css({'left': x});
            $('.contextmenu').css({'top': y});
        };
        function showContextMenu(caurrentLatLng) {
           
            
            projection = map.getProjection();
            $('.contextmenu').remove();
            contextmenuDir = document.createElement("div");
            contextmenuDir.className = 'contextmenu';
            contextmenuDir.innerHTML = "<a id='menu1' href='#' onclick='openPopup()'><div class=context>Thêm Thông Tin<\/div><\/a><a id='menu2'><div class=context>menu item 2<\/div><\/a>";
            $(map.getDiv()).append(contextmenuDir);

            setMenuXY(caurrentLatLng);

            contextmenuDir.style.visibility = "visible";
            
        }

        
        //=========================== Start OpenPopup =============================
        function openPopup() {
            $(document).ready(function () {
                centerPopup();
                $("#menu1").dblclick(function () {
                    $.ajax({
                        url: "insert.aspx",
                        data:"{}",
                        success: function (result) {
                            $("#link").html(result);
                            loadPopup();
                            //$("#link").load("insert.aspx");
                            $("#popupContactClose").click(function () {
                                disablePopup();
                            });
                            $("#btnThoat").click(function () {
                                disablePopup();
                            });
                            
                            $("#backgroundPopup").click(function () {
                                disablePopup();
                            });
                     }
                });
            });
          });
        }
        //========================= End Popup ========================================

        //========================= Start Load Du Lieu =====================================
        function LoadData() {
            var url = "http://localhost:49732/Service.svc/dulieu/?format=json";
            $.ajax({
                type: "GET",
                url: url,
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data, success) {
                    var latlngArr = data;
                    var pointArr = new google.maps.MVCArray(latlngArr);
                    for (var i = 0; i < pointArr.length; i++) {
                        var latLng = new google.maps.LatLng(data[i].ViDo, data[i].KinhDo);

                        html = "<div class=''>" + data[i].MaDichVu + ":" + data[i].TenDuLieu + "</div>";
                        html = html + "<div class=''>" + data[i].SoNha + "," + data[i].TenDuong;
                        html = html + "," + data[i].MaPhuong + "," + data[i].MaQuanHuyen + "," + data[i].MaTinhThanh + "</div>";
                        html = html + "<div class=''><a href='#'>Xoa</a></div>";
                        addMarker(data, latLng, i, html);
                    }

                }
            });
        }
        function addMarker(data, latlng, number, address) {

            marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.close();
                infoWindow.setContent(address);
                infoWindow.open(map, this);
                setTimeout(function () { infoWindow.close(); }, 30000);
            });
        }
        //========================= End Load ===============================================
        //========================= Load Quận Huyện ========================================
            $().ready(function () {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:49732/Service.svc/quanhuyen",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var list = data;

                        for (var i = 0; i < list.length; i++) {
                            var combo = document.getElementById("ddlQuanHuyen");
                            var option = document.createElement("option");
                            option.text = data[i]._tenQuanHuyen.toString();
                            option.value = data[i]._maQuanHuyen.toString();
                            try {
                                combo.add(option, null);
                            }
                            catch (Error) {
                                alert("Co loi");
                                combo.add(option);
                            }
                        }
                    },
                    error: function () {
                        alert("Failed to load genders");
                    }
                });
            });
            //================================= End Load ===================================   
            /*========================================= Start Tim Kiem Theo Quan =========================*/

            function HienThiTheoQuanHuyen() {
                var maQuanHuyen = $('#ddlQuanHuyen').val();
                var url = "http://localhost:49732/Service.svc/dulieu/" + maQuanHuyen;
                //if ($('#ddlQuanHuyen').is(':selected')) {
                    $.ajax({
                        type: "GET",
                        url: url,
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data, success) {
                            var latlngArr = data;
                            var pointArr = new google.maps.MVCArray(latlngArr);
                            for (var i = 0; i < pointArr.length; i++) {
                                var latLng = new google.maps.LatLng(data[i].ViDo, data[i].KinhDo);

                                html = "<div class=''>" + data[i].MaDichVu + ":" + data[i].TenDuLieu + "</div>";
                                html = html + "<div class=''>" + data[i].SoNha + "," + data[i].TenDuong;
                                html = html + "," + data[i].MaPhuong + "," + data[i].MaQuanHuyen + "," + data[i].MaTinhThanh + "</div>";
                                html = html + "<div class=''><a href='#'>Xoa</a></div>";

                                addMarker(data, latLng, i, html);

                            }

                        }
                    });
                //}
            }

            /*========================================= End ========================================*/

    </script>
    
</head>
<body onload="initialize()">
    <form id="frmMap" runat="server">
    <div id="frame">
        <div id="backgroundPopup"></div>
        <div id="banner">
            
        </div>
        <div id="frame_main">
            <div id="left">
                <div id="button"><input id="btnHienThi" type="button" value="Hiển Thị" onclick="LoadData()" /></div>
                <div id="cbbTimKiemTheoQuan">
                    <uc1:TimKiemTheoQuanHuyen ID="TimKiemTheoQuanHuyen1" runat="server" />
                </div>   
                <div id=""></div>
            </div>
            <div id="main">
                <div id="content">

                </div>
                <div id="link"></div>
            </div>
        </div>  
    </div>
    </form>
</body>
</html>
